<template>
	<view class="_tbody">
		<!-- 自定义导航栏 -->
		<view>
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar title="分类" @rightClick="rightClick" :autoBack="true" :placeholder="true">
			</u-navbar>
		</view>

		<view class="search">
			<u-search shape="square" :showAction="false"></u-search>
		</view>

		<!-- 分类左边 -->
		<view class="all">
			<view class="left">
				<view class="" v-for="item in catesList" :key="item.id">{{item.catename}}</view>
			</view>
			<view class="right">
				<view class="right_top" v-for="v in catesList" :key="v.id">
					<view>{{v.catename}}</view>
					<view class="right_top_flex">
						<view class="right_top_image" v-for="item in v.children" :key="item.id">
							<image :src="item.img" mode=""></image>
							<view>{{item.catename}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				catesList: [], // 分类数据接口
			}
		},
		methods: {
			rightClick() {
				console.log('rightClick');
			},
			leftClick() {
				console.log('leftClick');
			}
		},
		onLoad() { // 生命周期回调 监听页面加载 
			// 页面加载的时候触发 一个页面只会调用一次 可以在onLoad的参数中获取打开当前页面路径中的参数
			// this.$http({
			// 	url: '/api/getcates'
			// }).then((res) => {
			// 	// console.log(res);
			// 	if(res.data.code == 200){
			// 		this.catesList = res.data.list
			// 	}
			// 	console.log(this.catesList);
			// })
			uni.request({
				url: 'https://api.aslegou.top/api/getcates',
				method: 'GET',
				data: {},
				success: (res) => {
					// console.log(res);
					this.catesList = res.data.list
					this.catesList.forEach((item) => {
						if (item.children) {
							item.children.map((item1, index1) => {
								item1.img = this.$baseUrl + item1.img
							})
						}
					})
					// console.log(this.catesList);
				}
			})

		}
	}
</script>

<style scoped>
	._tbody {
		background-color: #ccc;
	}

	.all {
		display: flex;
	}

	.left {
		height: 100%;
	}

	.left view {
		width: 230rpx;
		height: 100rpx;
		/* border: 1px solid red; */
		background-color: white;
		text-align: center;
		line-height: 100rpx;
	}

	.right {
		width: 70%;
		height: 100%;
		/* background-color: aqua; */
		padding: 20rpx;
	}

	.right .right_top {
		margin-top: 20rpx;
	}

	/* .right .right_top:nth-child(3) {
		margin-top: 20rpx;
	} */

	.right_top_flex {
		display: flex;
		/* justify-content: space-between; */
		flex-wrap: wrap;
	}

	.right_top {
		width: 480rpx;
		height: 480rpx;
		background-color: white;
	}

	.right_top_image image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
	}

	.right_top_image view {
		text-align: center;
	}

	.search {
		background-color: #FF6040;
		padding: 20rpx;
	}
</style>